<style type="text/css">
    body {height:auto}
    .graph {float:left;width:100%}
    .month{margin-top:10px}
    .month:nth-child(5){clear:both}
    .month .name{color:#777;font-weight:normal;font-size:12px;padding:4px 2px}
    .month .date{position:relative;color:rgba(255,255,255,0.4);font-size:10px;width:24px;height:24px;overflow:hidden;float:left}
    .month .day{position:absolute;left:0;top:0;z-index:2;text-align:center;line-height:22px;width:24px;height:24px}
    
    .month .date.free{background:#0F6805}
    .month .date.reserved{background:#fc0;color:rgba(0,0,0,0.3)}
    .month .date.occupied{background:#f00}
    
    .legend {border-top:1px solid #ccc;padding-top:20px;margin-top:20px;clear:both}
    .legend li{list-style:none; display:inline-block;margin-right:10px;border-left:16px solid #ccc;padding-left:3px}
    .legend .free{border-color:#0F6805}
    .legend .reserved{border-color:#fc0}
    .legend .occupied{border-color:#f00}
</style>
<?php
    $monthNames = Configure::read('month-names');
    $start = totime(@$filter['start']);
    $end   = totime(@$filter['end']);
    $year  = date('Y', $start);
    
    $startMonth = date('m', $start);
    $startYear  = date('Y', $start);
    
    $endMonth = date('m', $end);
    $endYear  = date('Y', $end);
    
    $iteration = array();
    for ($yi=$startYear; $yi<=$endYear; $yi++) {
        $monthLimit = 12;
        if ($yi==$endYear) {
            $monthLimit = $endMonth;
        }
        for ($mi=$startMonth; $mi<=$monthLimit; $mi++) {
            $iteration[] = array(
                'year'  => $yi,
                'month' => $mi
            );
        }
    }
?>
<? if (!empty($filter['start']) && !empty($filter['end'])): ?>
<div class="graph">
    <? foreach ($iteration as $item): ?>
    <?
        $year  = (int)$item['year'];
        $month = (int)$item['month'];
    ?>
        <div class="month left span25p">
            <h3 class="name"><?= $monthNames[$month-1] ?> '<?= substr($year, 2) ?></h3>
            
            <?php
                $first = totime("{$year}-{$month}-01");
                $last  = totime(month_last_day("{$year}-{$month}-01"));
            ?>
            <? for ($i=$first; $i<=$last; $i+=60*60*24): ?>
            <?php
                $status = 'free';
                
                if (!empty($data['reserved'][$i])) {
                    $status = 'reserved';
                }
                if (!empty($data['occupied'][$i])) {
                    $status = 'occupied';
                }
            ?>
            <div class="date <?= $status ?>" data-time="<?= $i ?>" data-date="<?= date('Y-m-d H:i:s', $i) ?>">
                <span class="day"><?= date('d', $i) ?></span>
            </div>
            <? endfor ?>
        </div>
    <? endforeach ?>
</div>
<? endif ?>
 
<br clear="all">
<ul class="legend">
    <li class="free">slobodno</li>
    <li class="occupied">zauzeto</li>
    <li class="reserved">rezervisano</li>
</ul>
